<template>
  <view class="item">
    <div class="item-title">
      <span>{{ title }}</span>
      <span>
        <slot name="header-right" />
      </span>
    </div>
    <div class="echarts-container">
      <slot name="default">
        <V-Eaharts
          v-if="Object.keys(opts).length"
          :options="opts"
          autoresize
          style="width: 100%; height: 100%"
        />
      </slot>
    </div>
  </view>
</template>

<script>
import VEaharts from '@/common/vecharts';

export default {
  components: {
    VEaharts
  },

  props: {
    title: {
      type: String,
      default: ''
    },

    opts: {
      type: Object,
      default: () => ({})
    }
  }
};
</script>

<style lang="scss" scoped>
.item {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .item-title {
    font-size: 17px;
    height: 50px;
    display: flex;
    align-items: center;
    margin: 0 16px;
    justify-content: space-between;
  }

  .echarts-container {
    flex: 1;
  }

}
</style>
